// data数据
// 如果localStorage存在数据，则获取本地缓存，否则创建一个新的data数据对象
var data = (localStorage.getItem('todoList') ? JSON.parse(localStorage.getItem('todoList')) : {
  incomplete: [],
  completed: []
})


// 删除/完成按钮的SVG图案
var removeSVG = `<svg class="icon grey" aria-hidden="true">
<use xlink:href="#icon-lajitong"></use>
</svg>`
var completeSVG = `<svg class="icon icon-green" aria-hidden="true">
<use xlink:href="#icon-0-58"></use>
</svg>`

// 获取元素
const addBtn = document.querySelector('#addBtn')
const input = document.querySelector('#item')

// 渲染函数
renderTodoList(data)

// 将data数据存放到localStorage缓存
function dataObjectUpdated () {
  localStorage.setItem('todoList', JSON.stringify(data))
}


// 初始化渲染函数
function renderTodoList (todoList) {
  for (let i = 0; i < todoList.incomplete.length; i++) {
    var value = todoList.incomplete[i]
    addItemToDOM(value)
  }
  for (let i = 0; i < todoList.completed.length; i++) {
    var value = todoList.completed[i]
    addItemToDOM(value, true)
  }
}



// addBtn点击事件的回调函数
function btnClick () {
  // console.log('button clicked');
  var value = input.value

  // 输入的值不能为空，否则不执行
  if (value) {
    add(value)
  }
}


// 回车触发的回调函数
function enterClick (e) {
  var value = input.value

  if (e.key === 'Enter' && value) {
    add(value)
  }
}


// 输入框处理函数
function add (value) {
  input.value = ''
  addItemToDOM(value)

  // 把text存一份到data数据中
  data.incomplete.push(value)
  // 更新localStorage里的数据
  dataObjectUpdated()
}


// 添加待办事项到列表
function addItemToDOM (text, completed) {
  const list = (completed) ? document.querySelector
    ('#completed') : document.querySelector
    ('#incomplete')
  // 创建元素
  var item = document.createElement('li')
  item.innerHTML = text

  // 方法1：直接把html标签插入进行渲染
  // 这种直接渲染页面的方法效率极低且占用内存大，一般不采用
  //   item.innerHTML = text + `<div class="buttons">
  //   <button class="remove">
  //     <svg class="icon grey" aria-hidden="true">
  //       <use xlink:href="#icon-lajitong"></use>
  //     </svg>
  //   </button>
  //   <button class="complete">
  //     <svg class="icon icon-green" aria-hidden="true">
  //       <use xlink:href="#icon-0-58"></use>
  //     </svg>
  //   </button>
  // </div>`

  //   incompleteList.appendChild(item)

  // 方法2：减少了模板解析量，仅有SVG必须通过模板解析，其余的元素手动添加，效率更高
  var buttons = document.createElement('div')
  buttons.classList.add('buttons')


  var remove = document.createElement('button')
  remove.classList.add('remove')
  // 把SVG图标放进remove按钮
  remove.innerHTML = removeSVG
  // 创建remove元素的同时，给改元素绑定delete事件
  remove.addEventListener('click', deleteItemTodo)


  var complete = document.createElement('button')
  complete.classList.add('complete')
  // 同上
  complete.innerHTML = completeSVG
  // 创建complete任务的同时，给元素绑定done事件
  complete.addEventListener('click', hasdoneTodo)


  // 把remove，complete按钮都装进buttons盒子
  buttons.appendChild(remove)
  buttons.appendChild(complete)
  // 把buttons盒子插入item盒子中
  item.appendChild(buttons)
  // 最后，把li（item）插入到ul（incompleteList）的第一个子元素前
  list.insertBefore(item, list.childNodes[0])
}


// 删除待办事项
function deleteItemTodo () {
  if (confirm('你确定要删除吗?')) {
    var item = this.parentNode.parentNode
    var parent = item.parentNode
    var id = parent.id
    var value = item.innerText
    if (id === 'incomplete') {
      data.incomplete.splice(data.incomplete.indexOf(value), 1)
    } else {
      data.completed.splice(data.completed.indexOf(value), 1)
    }
    // 更新localStorage里的数据
    dataObjectUpdated()

    parent.removeChild(item)
  }
}


// 将待办事件转换成已完成事件
function hasdoneTodo () {
  var item = this.parentNode.parentNode
  var parent = item.parentNode
  var id = parent.id

  // 获取当前item的内部文本
  var value = item.innerText
  if (id === 'incomplete') {
    data.incomplete.splice(data.incomplete.indexOf(value), 1)
    data.completed.push(value)
  } else {
    data.completed.splice(data.incomplete.indexOf(value), 1)
    data.incomplete.push(value)
  }
  // 更新localStorage里的数据
  dataObjectUpdated()

  // 判断item事项应该加到complete列表还是加到incomplete列表
  var target = (id === 'incomplete') ? document.querySelector('#completed') : document.querySelector('#incomplete')

  // 移除事项
  parent.removeChild(item)
  target.insertBefore(item, target.childNodes[0])
}


addBtn.addEventListener('click', btnClick)
input.addEventListener('keyup', enterClick)
